<template>
  <el-card class="image">
    <my-header title="素材管理" slot="header"></my-header>
    <el-radio-group v-model="radioType" class="ridioTpye">
      <el-radio-button label="全部"></el-radio-button>
      <el-radio-button label="收藏"></el-radio-button>
      <div class="nouse"></div>
      <el-button
        type="success"
        class="upimg"
        size="small"
        @click="isShow = true"
      >
        上传图片收藏
      </el-button>
    </el-radio-group>
    <transition-group name="fade">
      <template v-if="imgList.length != 0">
        <div v-for="(item, index) in imgList" :key="index" class="allDiv">
          <el-image class="divimg" :src="item.url || perchImg"></el-image>
          <div class="placeholderdiv">
            <el-row>
              <el-col :span="6" :offset="6">
                <i
                  class="el-icon-star-off"
                  @click="starClick(item, index)"
                  :class="{ active: item.is_collected }"
                ></i>
              </el-col>
              <el-col :span="6" :offset="4">
                <i class="el-icon-delete" @click="clearClick(item)"></i>
              </el-col>
            </el-row>
          </div>
        </div>
      </template>
      <div v-else class="noData" key="2">暂无数据</div>
    </transition-group>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="params.page"
      :page-size="params.per_page"
      layout="total, prev, pager, next"
      :total="total"
      background
    >
    </el-pagination>
    <el-dialog
      title="请选择图片"
      :visible.sync="isShow"
      :modal-append-to-body="false"
      width="600px"
    >
      <div slot="title" class="title">
        请选择图片
      </div>
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        name="image"
        :headers="headers"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </el-card>
</template>

<script>
import { getimage, collection, getdelete } from '../../api/image'
import { getUser } from '../../utils/storage'
export default {
  data () {
    return {
      radioType: '全部',
      params: {
        collect: false,
        page: 1,
        per_page: 10
      },
      imgList: '',
      total: 1,
      isShow: false,
      headers: { Authorization: `Bearer ${getUser().token}` },
      imageUrl: '',
      perchImg: require('@/assets/default.png'),
      index: ''
    }
  },
  watch: {
    isShow (val) {
      if (!val) {
        this.imageUrl = ''
      }
    },
    radioType (val) {
      if (val === '收藏') {
        this.params.page = 1
        this.getData(true)
      } else {
        this.params.page = 1
        this.getData()
      }
    }
  },
  methods: {
    getData (bol) {
      if (bol) {
        getimage(this.params, true).then(res => {
          this.imgList = res.data.results
          this.total = res.data.total_count
          this.index = this.imgList.length
        })
      } else {
        getimage(this.params).then(res => {
          this.imgList = res.data.results
          this.total = res.data.total_count
          this.index = this.imgList.length
        })
      }
    },
    // 页码改变改变页码
    handleCurrentChange (page) {
      this.params.page = page
      if (this.radioType === '收藏') {
        this.getData(true)
      } else {
        this.getData()
      }
    },
    starClick (item, index) {
      collection(item.id, { collect: !item.is_collected }).then(res => {
        item.is_collected = res.data.collect
        if (res.data.collect) {
          this.$message.success('收藏成功')
        } else {
          this.imgList.splice(index, 1)
          this.$message.success('取消收藏')
        }
      })
    },
    clearClick (item) {
      getdelete(item.id).then(res => {
        if (this.params.page !== 1) {
          console.log('1')
          if (this.index === 1) {
            console.log('2')
            this.params.page--
          }
        }
        if (this.radioType === '收藏') {
          this.getData(true)
        } else {
          this.getData()
        }
        this.$message.success('删除成功')
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.$message.success('上传成功')
      res.data.is_collected = false
      this.imgList.unshift(res.data)
      this.imgList.splice(10, 1)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.6s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.image {
  .noData {
    margin-bottom: 30px;
    text-align: center;
    color: rgb(189, 188, 188);
  }
  .avatar-uploader {
    text-align: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .is-background {
    text-align: center;
    margin-right: 30px;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__header {
    text-align: center;
    .title {
      background-color: skyblue;
      height: 50px;
      line-height: 50px;
    }
    i {
      padding-bottom: 15px;
    }
  }
  .el-image__error {
    width: 261px;
    height: 150px;
  }
  .el-image__inner {
    width: 261px;
    height: 150px;
  }
  .allDiv {
    display: inline-block;
    position: relative;
    padding-right: 48px;
    padding-bottom: 40px;
    .placeholderdiv {
      position: absolute;
      bottom: 43px;
      background-color: rgba(0, 0, 0, 0.3);
      height: 25px;
      width: 261px;
      .active {
        color: red;
      }
      i {
        margin-top: 3px;
        font-size: 20px;
        color: white;
        cursor: pointer;
      }
    }
  }
  .ridioTpye {
    display: flex;
    margin-bottom: 20px;
    .nouse {
      flex: 1;
    }
    .upimg {
      height: 30px;
    }
  }
  .divimg {
    width: 261px;
    height: 150px;
    img {
      object-fit: cover;
      width: 261px;
      height: 150px;
    }
  }
}
</style>
